<template>
  <div class="admin-box">
    <el-container :style="{ height: hrights }" style="border: 1px solid #eee">
      <el-aside width="1.7rem" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '2', '3']" :default-active="indexs">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-menu"></i>用户管理</template
            >
            <el-menu-item-group>
              <router-link to="administration">
                <el-menu-item index="1-1"> 用户列表 </el-menu-item></router-link
              >
              <router-link to="administrationmessage">
                <el-menu-item index="1-2"
                  >用户反馈信息</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-menu"></i>美食管理</template
            >
            <el-menu-item-group>
              <router-link to="adminfood">
                <el-menu-item index="2-1">食物信息</el-menu-item></router-link
              >
              <router-link to="insertfoods">
                <el-menu-item index="2-2">添加美食</el-menu-item></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-menu"></i>美食搭配</template
            >
            <el-menu-item-group>
              <router-link to="admincollocation">
                <el-menu-item index="3-1"
                  >美食搭配信息</el-menu-item
                ></router-link
              >
              <router-link to="insertadmincoll">
                <el-menu-item index="3-2"
                  >添加美食搭配</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <span class="userNames">管理员 : {{ userName }}</span>
          <span class="adminout" @click="adminOut"> 退出 </span>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "Admin",
  data() {
    return {
      showUser: true,
      showMessage: false,
      indexs: "",
      userName: "",
    };
  },
  created() {
    this.handleResize();
    console.log(this.$route.path);
    if (this.$route.path == "/admin/administration") {
      this.indexs = "1-1";
    }
    if (this.$route.path == "/admin/administrationmessage") {
      this.indexs = "1-2";
    }
    if (
      this.$route.path == "/admin/adminfood" ||
      this.$route.path == "/admin/updatefoods"
    ) {
      this.indexs = "2-1";
    }
    if (this.$route.path == "/admin/insertfoods") {
      this.indexs = "2-2";
    }
    if (this.$route.path == "/admin/admincollocation") {
      this.indexs = "3-1";
    }
    if (this.$route.path == "/admin/insertadmincoll") {
      this.indexs = "3-2";
    }

    request({
      url: "/user/queryUserInfo",
      method: "post",
      params: {
        userId: sessionStorage.getItem("userid"),
      },
    })
      .then((res) => {
        this.userName = res.data.data.userName;
      })
      .catch((err) => {
        console.log(err);
      });
  },

  beforeDestroy: function () {
    window.removeEventListener("resize", this.handleResize);
  },

  methods: {
    handleResize() {
      this.hrights = document.documentElement.clientHeight - 5 + "px";
    },
    adminOut() {
      sessionStorage.setItem("userid", null);
      sessionStorage.setItem("usertype", null);
      this.$router.push("/homepage");
      location.reload();
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.admin-box a {
  text-decoration: none;
  color: black;
}

.userNames {
  font-size: 0.11rem;
  margin-right: 0.6rem;
}

.adminout {
  cursor: pointer;
}
</style>